<template>
    <div>
      <div class="musicContent-nav">
        <van-icon name="arrow-left" @click="back"/>
        <div class="nav-title">
          <span class="title">{{content.title}}</span>
        </div>
      </div>
      <div class="musicContent-singer">{{content.author}}</div>
      <div class="musicContent-img"><img :src="content.pic" alt=""></div>
      <div class="action">
        <audio controls loop class="music">
          <source :src="content.url">
        </audio>
      </div>

    </div>
</template>

<script>
  export default {
    data(){
      return{
        content:"",
        id:'',
      }
    },
    created(){
      this.getContent()
    },
    methods:{
      back(){
        this.$router.go(-1)
      },
      getContent(){
        this.content = this.$route.query.content
        this.id = this.$route.query.id
      }
    }

  }
</script>

<style lang="less">
  .musicContent-nav{
    padding-top: 2rem;
    position: relative;
    .van-icon, .van-icon::before{
      font-size: 2rem;
    }
    .nav-title{
      text-align: center;
      .title{
        display: inline-block;
        font-size: 2rem;
      }
    }

  }
  .musicContent-singer{
    padding-top: 2rem;
    text-align: center;
  }
  .musicContent-img{
    padding-top: 6rem;
    text-align: center;
    img{
      display: inline-block;
      width: 32rem;
      height: 30rem;
      border-radius: 50%;
    }
  }
  .action{
    text-align: center;
    padding-top: 10rem;
    .music{
      background-color: #f2f2f2;
      width: 90%;
      height: 4rem;
    }
  }
</style>
